<script setup lang="ts">
import { Head } from '@vueuse/head';
import { chunk } from 'lodash';

import useGlobal from '@/hooks/useGlobal';
useGlobal();

const { t } = useI18n();

console.log('函数助手库演示', chunk(['a', 'b', 'c', 'd'], 2));

const features = [
  {
    name: 'Vite扩展自动装载',
    description:
      'vite插件配置自动装载，项目所使用的vite插件无论配置多复杂，vite.config.ts 文件代码依旧能保持简结无所变化，让每一个vite扩展插件独立配置，使用再多扩展后期亦可轻松维护. ',
    icon: 'mdi:alpha-b-circle'
  },
  {
    name: 'Vue扩展自动装载',
    description:
      'Vue插件配置自动装载，项目所使用的Vue插件无论配置多复杂，入口 main.ts 文件代码依旧能保持简结无所变化，让每一个Vue扩展插件独立配置，使用再多扩展后期亦可轻松维护. ',
    icon: 'mdi:alpha-c-circle'
  },
  {
    name: '自动化路由与多布局',
    description:
      '在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹来管理路由，项目越大路由越难维护，唯有让路由自动化生成，才能提高开发效率。',
    icon: 'mdi:alpha-a-circle'
  },
  {
    name: '图标与组件模块自动按需引用',
    description:
      '100个多图标集，一万多个图标，想用即用，本地线上任意选择。组件模块按需编译，零配置，只需选择合适你的项目所使用的UI库即可，代码大量注释，适合新手学习',
    icon: 'mdi:alpha-d-circle'
  }
];
</script>

<template>
  <Head>
    <title>Hello World</title>
  </Head>
  <div class="@apply py-12 bg-white dark:bg-dark-100">
    <div class="@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="lg:text-center">
        <div style="text-align: center">
          <img alt="Vue logo" src="@/assets/logo.png" />
        </div>
        <h2 class="@apply text-base text-indigo-600 font-semibold tracking-wide uppercase">
          <span v-t="'about'"></span>
          {{ $t('index') }} {{ t('demotxt') }}
        </h2>
        <p class="@apply mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">welcome use vue3</p>
        <h2 class="mb-1 text-lg">
          [
          <a target="_blank" href="https://vitejs.dev/">Vite 2</a>
          +
          <a target="_blank" href="https://vuejs.org/">Vue 3</a>
          +
          <a target="_blank" href="https://www.typescriptlang.org/zh/">TypeScript</a>
          +
          <a target="_blank" href="https://code.visualstudio.com/">VSCode</a>
          +
          <a target="_blank" href="https://github.com/johnsoncodehk/volar">Volar</a>
          ]
        </h2>
        <p class="@apply mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">珠联璧合! 快的不止那么一点点~</p>
      </div>

      <div class="mt-10">
        <dl class="@apply space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
          <div v-for="feature in features" :key="feature.name" class="relative">
            <dt>
              <div class="@apply absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                <Icon class="text-3xl" :icon="feature.icon" />
              </div>
              <p class="@apply ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                {{ feature.name }}
              </p>
            </dt>
            <dd class="@apply mt-2 ml-16 text-base text-gray-500">
              {{ feature.description }}
            </dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</template>
